<template>
    <el-dialog :model-value="dialogVisible" title="选择费用类型" width="800px" :before-close="handleClose" append-to-body>
        <el-form ref="formRef" :model="dataForm" label-width="10px" :inline="false">
            <el-form-item prop="subjectName" style="padding:10px;margin-bottom:10px" label="已选费用类型：" label-width="110px">
                <div v-if="selectFeeTypeList.length > 0" style="margin:0;max-height: 100px;overflow-y: scroll;">
                    <el-tag v-for="(item, index) in selectFeeTypeList" :key="index" class="tags" closable :type="item.label"
                        @close="removeTab(index, item)">
                        {{ item.typeName }}
                    </el-tag>
                </div>
                <div class="no-data" style="margin:0" v-else>暂无数据</div>
            </el-form-item>
            <el-form-item>
                <el-row style="width:100%;border:1px solid #dcdfe6;border-radius:5px;">

                    <el-col :span="24">
                        <div class="head">
                            <p>已选 {{ selectNum }}/{{ feeTypeOptionsShowData.length }}</p>
                            <p @click="allCheck">全选</p>
                        </div>
                        <div class="selec-city" v-loading="loading">
                            <el-form-item prop="subjectName" style="padding:10px;margin-bottom:10px">
                                <el-input v-model="dataForm.subjectName" placeholder="请输入类型名称搜索" clearable
                                    @input="searchFeeType" />
                            </el-form-item>
                            <div class="subject-con">
                                <div v-if="feeTypeOptionsShowData.length > 0">
                                    <div v-for="(item, index) in feeTypeOptionsShowData" :key="index" class="subject-list">
                                        <p>{{ item.typeName }}（{{ item.typeCode }}）</p>
                                        <div class="check-box" @click="selectFeeType(index)">
                                            <img :src="selectIcon" alt v-if="item.isSelect" />
                                            <img :src="noSelectIcon" alt v-else />
                                        </div>
                                    </div>
                                </div>
                                <div class="no-data" v-else>暂无数据</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit()" :disabled="disabled">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import api from "@/api/index";
import { ElMessage, ElMessageBox } from 'element-plus'
import selectIcon from '@/assets/images/check_select.png'
import noSelectIcon from '@/assets/images/check_no_select.png'
import { dataListStore } from '@/store/modules/pubiclDataList'
import { unique } from '@/util/index'
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    selectTypeIds: {
        type: Array,
        default: () => []
    },
    disabled: {
        type: Boolean,
        default:false
    }

})

const dataForm = ref({
    subjectName: ''
})

const loading = ref(false)

const feeTypeOptionsShowData = ref([])

const feeTypeOptions = ref([])

const formRef = ref(null)

const selectFeeTypeList = ref([])

const emit = defineEmits(['on-update', 'handleClose'])

const dataStore = dataListStore()

const selectNum = computed(() => {
    let list = []
    feeTypeOptionsShowData.value.forEach((item) => {
        if (item.isSelect) {
            list.push(item)
        } else {
            const findIndex = selectFeeTypeList.value.findIndex(itemTwo => itemTwo.id == item.id)
            if (findIndex > -1) selectFeeTypeList.value.splice(findIndex, 1)
        }
    })
    console.log('触发')
    selectFeeTypeList.value = unique([...selectFeeTypeList.value, ...list], 'id')
    return list.length
})



onMounted(() => {
    console.log(props.selectTypeIds, 'selectTypeIds')
    getFeeTypeList()

});


// 关闭
const handleClose = () => {
    formRef.value.resetFields()
    formRef.value.clearValidate()
   let newList = [...dataStore.allfeeTypeVOList, ...props.selectTypeIds]
    dataStore.setAllfeeTypeVOList(newList)
    emit('handleClose')

}
// 全选
const allCheck = () => {
    let arr = feeTypeOptionsShowData.value.filter(item => item['isSelect'])
    if (arr.length == feeTypeOptionsShowData.value.length) {

        // 代表已全选 应该反选
        feeTypeOptionsShowData.value.forEach(item => {
            item['isSelect'] = false
        })
    } else {
        feeTypeOptionsShowData.value.forEach(item => {
            item['isSelect'] = true
        })
    }
}

// 选择科目
const selectFeeType = (index) => {
    feeTypeOptionsShowData.value[index]['isSelect'] = !feeTypeOptionsShowData.value[index]['isSelect']
}

const removeTab = (val, item) => {
    var index = feeTypeOptionsShowData.value.findIndex(item2 => item2.typeName == item.typeName)
    if (index > -1) {
        feeTypeOptionsShowData.value[index]['isSelect'] = false
        console.log(index, feeTypeOptionsShowData.value[index])
        selectFeeTypeList.value.splice(index, 1)
    }

}



// 获取费用类型列表数据
const getFeeTypeList = () => {
    const params = {
        pageNum: 1,
        pageSize: 10000,
        enabled: true
    }
    loading.value = true
    api.feeConfig.feeTypeList(params).then(res => {
        let selectTypeIds = props.selectTypeIds
        // 已选择的费用类型过滤掉
        let selectVoList = [...dataStore.allfeeTypeVOList]

        res.list.forEach(item => {
            item['isSelect'] = false
        })

        // 回显
        if (selectTypeIds.length > 0) {
            selectTypeIds.forEach(item => {
                res.list.forEach(itemTwo => {
                    if (item == itemTwo.id) itemTwo['isSelect'] = true
                })
                //与当前ID 符合的删除掉 才能把当前的显示在列表中
                selectVoList.forEach((itemThree, index) => {
                    if (item == itemThree) selectVoList.splice(index, 1)
                })
            })
        }
        let listData = [...res.list]
        if (selectVoList.length > 0) {
            selectVoList.forEach(item => {
                listData.forEach((itemTwo, index) => {
                    if (item == itemTwo.id) listData.splice(index, 1)
                })
            })
        }
        dataStore.setAllfeeTypeVOList(selectVoList)
        feeTypeOptions.value = [...listData]
        feeTypeOptionsShowData.value = listData
        loading.value = false
    })

}


// 搜索
const searchFeeType = (val) => {
    if (val == '') {
        feeTypeOptionsShowData.value = feeTypeOptions.value
    } else {
        feeTypeOptionsShowData.value = feeTypeOptions.value.filter(item => item.typeName.includes(val))
    }

}
const submitDataDeal = () => {
    let children = selectFeeTypeList.value.map(item => item.id)
    let newList = [...dataStore.allfeeTypeVOList, ...children]
    dataStore.setAllfeeTypeVOList(newList)
    return children
}

const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {
            if (selectFeeTypeList.value.length == 0) return ElMessage.error('请选择费用类型')

            emit('on-update', submitDataDeal())
            emit('handleClose')

        } else {
            console.log('error submit!')
            return false
        }
    })
}


</script>
<style lang="scss" scoped>
.search-input {
    padding: 10px 0;
}

.tabs,
.head {
    display: flex;
    height: 40px;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    width: 100%;
    border-right: 1px solid #dcdfe6;

    p {
        margin: 0;
        font-size: 14px;
        margin: 0 14px;
        cursor: pointer;

        &.active {
            color: #0049ad;
            border-bottom: 1px solid #0049ad;
        }
    }
}

.head {
    border-right: 0;

    p {
        &:nth-child(1) {
            padding-left: 10px;
            flex: 1;
            color: #0049ad;
        }

        &:nth-child(2) {
            text-align: right;
        }
    }
}

.city-box {
    padding-left: 10px;
    border-right: 1px solid #dcdfe6;
    padding-right: 10px;
}

.filter-tree {
    height: 340px;
    overflow-y: auto;
    padding-bottom: 20px;
}

.selec-city {
    padding: 10px 0;

}

.subject-con {
    height: 400px;
    overflow-y: auto;
    padding-bottom: 20px;

    .subject-list {
        margin: 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5ff;
        padding: 0 10px;

        &:hover {
            background: #dcdfe6;
        }

        p {
            font-size: 14px;
            flex: 1;
            margin: 5px 0;
        }

        .check-box {
            img {
                width: 15px;
                height: 15px;
                margin-left: 15px;
                cursor: pointer;
            }
        }
    }
}

.tags {
    margin-right: 10px;
    margin-bottom: 10px;
}

.no-data {
    margin-top: 40px;
    text-align: center;
    color: #999;
    font-size: 14px;
}
</style>
